import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { LinkContainer } from 'react-router-bootstrap';
import { connect } from 'react-redux';
import { getClass, getSchema } from 'redux/modules/classes';
import { asyncConnect } from 'redux-async-connect';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import lodash from 'lodash';
import { stack as Menu } from 'react-burger-menu';
import { Link } from 'react-router';
import radium from 'radium';
import toastr from 'toastr';
const RadiumLink = radium(Link);

@asyncConnect([{
  promise: ({ params: { className }, store: { dispatch } }) => {
    const promises = [];
    promises.push(dispatch(getSchema(className)));
    promises.push(dispatch(getClass(className)));
    return Promise.all(promises);
  }
}])
@connect(
  (state, ownProps) => ({
    className: ownProps.params.className,
    data: state.classes[ownProps.params.className].data,
    schema: state.classes[ownProps.params.className].schema
  }),
  dispatch => bindActionCreators({ getClass }, dispatch))
export default class ClassesList extends Component {
  static propTypes = {
    className: PropTypes.string,
    data: PropTypes.array,
    schema: PropTypes.object
  }
  onRowSelect(row, isSelected) {
    console.log(row);
    toastr.info('Are you the 6 fingered man?');
    console.log('selected: ' + isSelected);
  }

  onSelectAll(isSelected) {
    console.log('is select all: ' + isSelected);
  }
  sayHello() {
    console.log('hello,makai');
  }
  columnFormatter(cell) {
    return cell;
  }
  stringColumnFormatter(cell) {
    return <strong>{cell}</strong>;
  }
  fileColumnFormatter(cell) {
    return <img src={cell.url} width={50} height={50} />;
  }
  renderTableHeader() {
    const fields = this.props.schema.fields;
    const fieldsArr = lodash.map(fields, (value, key) => {
      return ({ name: key, type: value.type });
    });
    return fieldsArr.map((field, index) => {
      let columnFormatterFun;
      switch (field.type) {
        case 'String':
          columnFormatterFun = this.stringColumnFormatter;
          break;
        case 'File':
          columnFormatterFun = this.fileColumnFormatter;
          break;
        default:
          columnFormatterFun = this.columnFormatter;
      }
      return (
        <TableHeaderColumn
          key={index}
          isKey={field.name === 'objectId' && true}
          onClick={this.sayHello}
          hidden={(lodash.indexOf(['ACL', 'createdAt', 'updatedAt'], field.name) !== -1) && true}
          dataField={field.name}
          dataSort
          dataFormat={columnFormatterFun}
          >
        {field.name}-{field.type}
        </TableHeaderColumn>
      );
    });
  }
  renderList() {
    const className = this.props.className;
    const lists = this.props.data;
    if (lists) {
      return (
        lists.map((item, key) => {
          return (
            <LinkContainer key={key} to={'/classes/' + className + '/' + item.objectId}>
              <li key={key}>{item.objectId}</li>
            </LinkContainer>

          );
        })
      );
    }
  }
  renderMenu() {
    const menuStyles = {
      bmBurgerButton: {
        position: 'fixed',
        width: '36px',
        height: '30px',
        left: '36px',
        top: '36px'
      },
      bmBurgerBars: {
        background: '#373a47'
      },
      bmCrossButton: {
        height: '24px',
        width: '24px'
      },
      bmCross: {
        background: '#bdc3c7'
      },
      bmMenu: {
        background: '#373a47',
        padding: '2.5em 1.5em 0',
        fontSize: '1.15em'
      },
      bmMorphShape: {
        fill: '#373a47'
      },
      bmItemList: {
        color: '#b8b7ad',
        padding: '0.8em'
      },
      bmOverlay: {
        background: 'rgba(0, 0, 0, 0.3)'
      }
    };
    return (
      <Menu isOpen right animations="slide" styles={ menuStyles } >
          <RadiumLink className="menu-item" to="/home">Home</RadiumLink>
          <RadiumLink className="menu-item" to="/settings">Settings</RadiumLink>
          <RadiumLink className="menu-item" to="/blablabla">Blablabla</RadiumLink>
        </Menu>);
  }

  render() {
    const products = this.props.data;
    const selectRowProp = {
      mode: 'checkbox',
      clickToSelect: true,
      bgColor: 'rgb(238, 193, 213)',
      onSelect: this.onRowSelect,
      onSelectAll: this.onSelectAll
    };
    return (
      <div>
        <BootstrapTable data={products} striped hover condensed selectRow={selectRowProp} columnFilter>
          {this.renderTableHeader()}
        </BootstrapTable>
      </div>
    );
  }
}
